<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">

      <el-container>
        <el-header style="text-align: left; font-size: 12px ;width: 100%">
          <el-select  style="width:130px"  size="small"  v-model="collegeID" clearable placeholder="请选择学院"   @change="selectByCollege">
            <el-option
                v-for="(item,idx) in colleges"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select  style="width:130px"  size="small" v-model="majorID" clearable placeholder="请选择专业"   @change="selectByMajor">
            <el-option
                v-for="(item,idx) in majors"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select  style="width:130px" size="small" v-model="classID" clearable placeholder="请选择班级"   @change="searchStudent">
            <el-option
                v-for="(item,idx) in classes"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select  style="width:130px"  size="small"  v-model="areaID" clearable placeholder="请选择园区"   @change="selectByArea">
            <el-option
                v-for="(item,idx) in areas"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select  style="width:130px"  size="small"  v-model="buildingID" clearable placeholder="请选择楼栋"  @change="selectByBuilding" >
            <el-option
                v-for="(item,idx) in buildings"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select  style="width:130px"  size="small"  v-model="roomID" clearable placeholder="请选择房间"  @change="searchStudent" >
            <el-option
                v-for="(item,idx) in rooms"
                :key="idx"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" style="margin-left: 187px" @click="batchCheckout">批量退宿</el-button>
        </el-header>

        <el-main>
          <el-table :data="tableData" height="575"
                    @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="50">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="100">
            </el-table-column>
            <el-table-column prop="nation" label="民族" width="150">
            </el-table-column>
            <el-table-column prop="birthplace" label="生源地" width="150">
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15]"
                :current-page="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
               >
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  _batchCheckout,
  // _batchAllocationWithBirthplace, _batchCheckout,
  _loadAreas,
  _loadBuildings,
  _loadClasses,
  _loadColleges,
  _loadMajors,
  _loadRooms, _searchStudentByAll
} from '../../../../../api/leader'

export default {
  data () {
    return {
      multipleSelection: [],
      collegeID: null,
      majorID: null,
      classID: null,
      areaID: null,
      buildingID: null,
      roomID: null,
      pageSize: 10,
      pageNum: 1,
      collegeName: '',
      majorName: '',
      className: '',
      areaName: '',
      buildingName: '',
      roomName: '',
      colleges: [],
      majors: [],
      classes: [],
      areas: [],
      buildings: [],
      rooms: [],
      collegesInput: '',
      majorsInput: '',
      classesInput: '',
      areasInput: '',
      buildingsInput: '',
      roomsInput: '',
      timeout: null,
      tableData: []
    }
  },
  methods: {
    async selectByCollege () {
      await _loadMajors(this.collegeID).then(res => {
        if (res.status) {
          this.majors = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    async selectByMajor () {
      await _loadClasses(this.majorID).then(res => {
        if (res.status) {
          this.classes = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    async selectByArea () {
      await _loadBuildings(this.areaID).then(res => {
        if (res.status) {
          this.buildings = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    async selectByBuilding () {
      await _loadRooms(this.buildingID).then(res => {
        if (res.status) {
          this.rooms = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    searchStudent () {
      const OBJ = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          CollegeID: this.collegeID,
          MajorID: this.majorID,
          ClassID: this.classID,
          AreaID: this.areaID,
          BuildingID: this.buildingID,
          RoomID: this.roomID
        }
      }
      _searchStudentByAll(OBJ).then(res => {
        if (res.status) {
          this.tableData = res.data
        }
      })
    },
    loadColleges () {
      _loadColleges().then(res => {
        this.colleges = res.data
      })
    },
    loadMajors () {
      _loadMajors(this.collegeID).then(res => {
        this.majors = res.data
      })
    },
    loadClasses () {
      _loadClasses(this.majorID).then(res => {
        this.classes = res.data
      })
    },
    loadAreas () {
      _loadAreas().then(res => {
        this.areas = res.data
      })
    },
    loadBuildings () {
      _loadBuildings(this.areaID).then(res => {
        this.buildings = res.data
      })
    },
    loadRooms () {
      _loadRooms(this.buildingID).then(res => {
        this.rooms = res.data
      })
    },
    searchStudent2 () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNum,
        data: {
          collegeName: this.collegeName,
          majorName: this.majorName,
          className: this.className,
          areaID: this.areaID,
          buildingID: this.buildingID,
          roomID: this.roomID
        }
      }
      _searchStudentByAll(DOT).then(res => {
        if (res.status) {
          this.tableData = res.data
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.pageNum = val
    },
    handleSelect (item) {
      console.log(item)
    },
    batchCheckout () {
      const OBJ = {
        LeaderID: JSON.parse(localStorage.getItem('user')).id,
        students: this.multipleSelection
      }
      _batchCheckout(OBJ).then(res => {
        if (res.status) {
          this.$message({
            message: '批量退宿成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '批量退宿失败',
            type: 'error'
          })
        }
      })
    },
    async test () {
      // console.log('1111111111111111111111')
      await this.loadColleges()
      await this.loadAreas()
    }
    // batchCheckout () {
    //   const DOT = {
    //     IDs: List < int > studentID
    //   }
    //   _batchCheckout(DOT).then(res => {
    //     if (res.status) {
    //       this.$message({
    //         message: '批量退宿成功',
    //         type: 'success'
    //       })
    //     }
    //   })
    // }
  },
  created () {
    this.test()
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>
